<template>
	<div class="container">
		<el-page-header @back="goBack" content="提现申请"></el-page-header>

		<el-radio-group v-model="dataType" class="e-m-t-45">
			<el-radio-button label="0">提现申请审核</el-radio-button>
			<el-radio-button label="1">提现流水</el-radio-button>
		</el-radio-group>

		<el-row type="flex" justify="space-between" class="nav-bar">
			<el-col :span="3">
				<el-button type="primary" @click="downloadwithdrawa()" plain><i
						class="iconfont icon-excel e-m-r-5"></i>导出Excel</el-button>
			</el-col>
			<el-col class="text-right">
				<el-form :inline="true" label-width="auto" class="nav-bar-form">
					<el-form-item label="申请时间">
						<el-date-picker @change="time" :clearable="false" value-format="yyyy-MM-dd" v-model="value1"
							type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
						</el-date-picker>
					</el-form-item>
					<el-form-item>
						<el-input placeholder="提现人或者流水编号搜索" v-model="key" clearable prefix-icon="el-icon-search"
							@clear="getList"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="getList">查询</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>

		<div class="type-state e-m-b-30">
			<span v-for="(item, index) in statusArr" :key="index" :class="{ 'on': status == item.value }"
				@click="status = item.value">{{ item.name }}</span>
		</div>

		<el-table :data="tableData" style="width: 100%" stripe>
			<el-table-column fixed prop="number" label="提现申请表编号" width="200">
			</el-table-column>
			<el-table-column prop="billdetailnumber" label="流水编号">
			</el-table-column>
			<el-table-column prop="way" label="提现方式" width="150">
			</el-table-column>
			<el-table-column prop="username" label="提现人" width="150">
				<template slot-scope="scope">
					<span>{{ scope.row.username }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="amount" label="提现金额（元）" width="150">
			</el-table-column>
			<el-table-column prop="createdate" label="申请时间" width="150">
				<template slot-scope="scope">
					<span>{{ scope.row.createdate }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="state" label="状态" width="150">
				<template slot-scope="scope">
					<span class="color-success" v-if="scope.row.state == '已到账'">已到账</span>
					<span class="color-warning" v-if="scope.row.state == '待审核'">待审核</span>
					<span class="color-danger" v-if="scope.row.state == '已驳回'" :title="scope.row.reason">已驳回</span>
					<span class="color-danger" v-if="scope.row.state == '打款出错'" :title="scope.row.reason">打款出错</span>
					<span class="color-success" v-if="scope.row.state == '已审核'">已审核</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" fixed="right" width="180">
				<template slot-scope="scope">
					<el-button @click="views(scope.row.id)" type="text" size="small">查看</el-button>
					<el-button @click="pass(scope.row.id)" type="text" size="small" v-if="scope.row.state == '待审核'">通过</el-button>
					<el-button @click="reject(scope.row.id)" type="text" size="small" v-if="scope.row.state == '待审核' || scope.row.state == '打款出错'">驳回</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="table-pagination">
			<el-pagination background layout="sizes, total, prev, pager, next" :total="total"
				:page-sizes="[10, 50, 100, 200]" :page-size="pageSize" :current-page="page" @current-change="pageChange"
				@size-change="handleSizeChange">
			</el-pagination>
		</div>
		<!-- 查看小哥提现详情 -->
		<!-- <el-dialog title="查看详情" :visible.sync="dialogVisible" width="1200px">
			<h3>基本信息</h3>
			<el-descriptions :column="2" border :labelStyle="{ width: '150px' }">
				<el-descriptions-item label="提现申请编号">
					{{ brotherForm.number }}
				</el-descriptions-item>
				<el-descriptions-item label="流水编号">
					{{ brotherForm.billdetailnumber }}
				</el-descriptions-item>
				<el-descriptions-item label="提现方式">
					{{ brotherForm.way }}
				</el-descriptions-item>
				<el-descriptions-item label="提现金额">
					{{ brotherForm.amount }}元
				</el-descriptions-item>
				<el-descriptions-item label="申请时间">
					{{ brotherForm.createdate }}
				</el-descriptions-item>
				<el-descriptions-item label="审核状态">
					<span class="color-success" v-if="brotherForm.state == '已到账'">{{ brotherForm.state }}</span>
					<span class="color-warning" v-if="brotherForm.state == '待审核'">{{ brotherForm.state }}</span>
					<span class="color-danger" v-if="brotherForm.state == '已驳回'"
						:title="brotherForm.reason">{{ brotherForm.state }}</span>
					<span class="color-danger" v-if="brotherForm.state == '打款出错'"
						:title="brotherForm.reason">{{ brotherForm.state }}</span>
					<span class="color-danger" v-if="brotherForm.state == '已审核'">{{ brotherForm.state }}</span>
				</el-descriptions-item>
				<el-descriptions-item label="银行开户行">
					{{ brotherForm.bankopenname }}
				</el-descriptions-item>
				<el-descriptions-item label="银行账号">
					{{ brotherForm.bankaccount }}
				</el-descriptions-item>
				<el-descriptions-item label="银行户名">
					{{ brotherForm.bankname }}
				</el-descriptions-item>
				<el-descriptions-item label="小哥名称">
					{{ brotherForm.username }}
				</el-descriptions-item>
				<el-descriptions-item label="打款时间">
					{{ brotherForm.examinedate }}
				</el-descriptions-item>
				<el-descriptions-item label="审核人">
					{{ brotherForm.examinename }}
				</el-descriptions-item>
			</el-descriptions>
			<h3>打款信息</h3>
			<el-descriptions :column="2" border :labelStyle="{ width: '150px' }">
				<el-descriptions-item label="打款流水编号">
					{{ brotherForm.paymentno }}
				</el-descriptions-item>
				<el-descriptions-item label="打款账号类型">
					{{ brotherForm.payway }}
				</el-descriptions-item>
				<el-descriptions-item label="打款账号">
					{{ brotherForm.accountnumber }}
				</el-descriptions-item>
			</el-descriptions>
			<span slot="footer" class="dialog-footer">
				<el-button @click="pass(brotherForm.id)" type="primary" v-if="brotherForm.state == '待审核'">打款</el-button>
				<el-button @click="reject(brotherForm.id)" type="danger"
					v-if="brotherForm.state == '待审核' || brotherForm.state == '打款出错'">驳回</el-button>
				<el-button @click="dialogVisible = false">关闭</el-button>
			</span>
		</el-dialog> -->
		<!-- 查看用户提现详情 -->
		<el-dialog title="查看详情" :visible.sync="dialogVisible2" width="1200px">
			<h3>基本信息</h3>
			<el-descriptions :column="2" border :labelStyle="{ width: '150px' }">
				<el-descriptions-item label="提现申请编号">
					{{ userForm.number }}
				</el-descriptions-item>
				<el-descriptions-item label="流水编号">
					{{ userForm.billdetailnumber }}
				</el-descriptions-item>
				<el-descriptions-item label="提现方式">
					{{ userForm.way }}
				</el-descriptions-item>
				<el-descriptions-item label="提现金额">
					{{ userForm.amount }}元
				</el-descriptions-item>
				<el-descriptions-item label="申请人">
					{{ userForm.username }}
				</el-descriptions-item>
				<el-descriptions-item label="申请时间">
					{{ userForm.createdate }}
				</el-descriptions-item>
				<el-descriptions-item label="用户类型">
					{{ userForm.usertype }}
				</el-descriptions-item>
				<el-descriptions-item label="审核状态">
					<span class="color-success" v-if="userForm.state == '已到账'">{{ userForm.state }}</span>
					<span class="color-warning" v-if="userForm.state == '待审核'">{{ userForm.state }}</span>
					<span class="color-danger" v-if="userForm.state == '已驳回'"
						:title="userForm.reason">{{ userForm.state }}</span>
					<span class="color-danger" v-if="userForm.state == '打款出错'"
						:title="userForm.reason">{{ userForm.state }}</span>
					<span class="color-danger" v-if="userForm.state == '已审核'">{{ userForm.state }}</span>
				</el-descriptions-item>
				<el-descriptions-item label="审核时间" v-if="userForm.examinedate">
					{{ userForm.examinedate }}
				</el-descriptions-item>
				<el-descriptions-item label="审核人" v-if="userForm.examinename">
					{{ userForm.examinename }}
				</el-descriptions-item>
			</el-descriptions>
			<h3>打款信息</h3>
			<el-descriptions :column="2" border :labelStyle="{ width: '150px' }">
				<el-descriptions-item label="打款流水编号" v-if="userForm.paymentno">
					{{ userForm.paymentno }}
				</el-descriptions-item>
				<el-descriptions-item label="打款账号类型">
					{{ userForm.way }}
				</el-descriptions-item>
				<el-descriptions-item label="打款账号" v-if="userForm.accountnumber">
					{{ userForm.accountnumber }}
				</el-descriptions-item>
				<el-descriptions-item label="银行账号" v-if="userForm.bankaccount">
					{{ userForm.bankaccount }}
				</el-descriptions-item>
				<el-descriptions-item label="银行户名" v-if="userForm.bankname">
					{{ userForm.bankname }}
				</el-descriptions-item>
				<el-descriptions-item label="开户行" v-if="userForm.bankopenname">
					{{ userForm.bankopenname }}
				</el-descriptions-item>
			</el-descriptions>
			<h3>提现过程</h3>
			<el-scrollbar class="process-item" :wrap-class="'process-item-wrap'">
				<el-timeline :reverse="false">
					<el-timeline-item v-for="(activity, index) in userForm.process" :key="index"
						:timestamp="activity.createddatetime">
						<div class="flex">
							<span class="e-p-r-50" style="font-weight:bold">{{ activity.state }}</span>
							<div class="tips">{{ activity.remarks }}</div>
						</div>
					</el-timeline-item>
				</el-timeline>
			</el-scrollbar>
			<span slot="footer" class="dialog-footer">
				<el-button @click="pass(userForm.id)" type="primary" v-if="userForm.state == '待审核'">打款</el-button>
				<el-button @click="reject(userForm.id)" type="danger" v-if="userForm.state == '待审核'">拒绝</el-button>
				<el-button @click="dialogVisible2 = false">关闭</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		layout: 'admin',
		head() {
			return {
				title: '提现申请' 
			}
		},
		data() {
			return {
				timeType: 0, //时间类型
				loading: true,
				value1: "", //下单时间
				starteate: "", //下单初始
				enddate: "", //下单结束
				dataType: 0,
				reverse: true,
				activities: [{
					content: '活动按期开始',
					timestamp: '2018-04-15'
				}, {
					content: '通过审核',
					timestamp: '2018-04-13'
				}, {
					content: '创建成功',
					timestamp: '2018-04-11'
				}],
				// relationid: 0,
				key: '',
				page: 1,
				pageSize: 10,
				status: [1,2,3,4],
				statusArr: [
					// {
					// 	name: '用户(客户组)提现申请',
					// 	value: 1
					// },
					// {
					// 	name: '小哥提现申请',
					// 	value: 2
					// }
					{
						name: '全部',
						value: [1,2,3,4]
					},
					{
						name: '待审核',
						value: [1]
					},
					{
						name: '已审核',
						value: [3]
					},
					{
						name: '已驳回',
						value: [2]
					},
					{
						name: '已到账',
						value: [4]
					},
					// {
					// 	name: '打款出错',
					// 	value: 5
					// }
				],
				loading: false,
				total: 0,
				dialogVisible: false,
				dialogVisible2: false,
				brotherForm: {},
				userForm: {},
				tableData: [],
				api: '/Admin/User'
			}
		},
		watch: {
			status(value) {
				// if (value == 1) {
				// 	this.api = '/Admin/User'
				// 	// this.relationid = 0
				// } else {
				// 	this.api = '/Admin/Brother'
				// 	// this.relationid = 0
				// }
				this.tableData = []
				this.getList()
			},
			dataType(val) {
				if (val == 0) {
					this.$router.push({
						path: '/admin/withdrawal/list'
					})
				} else {
					this.$router.push({
						path: '/admin/finance/withdrawList'
					})
				}
			}
		},
		mounted() {
			// if (this.$route.query.status) {
			// 	this.status = this.$route.query.status
			// }
			// if (this.$route.query.id) {
			// 	console.log(this.$route.query.id)
			// 	this.status = 2
			// 	this.api = '/Admin/Brother'
			// 	this.relationid = this.$route.query.id
			// }
			this.getList()
			// this.relationid = 0
		},
		methods: {
			downloadwithdrawa() {
				// let api = ''
				// if (this.status == 1) {
				// 	console.log('用户')
				// 	api = '/Admin/User/Apply/Download'
				// } else {
				// 	console.log('小哥')
				// 	api = '/Admin/Brother/Apply/Download'

				// }

				let api = '/Admin/User/Apply/Download'
				this.$axios.post(api, {
					"request": {
						"pageIndex": this.page,
						"pageSize": 0,
						"offset": 0,
						"key": "",
						"timeType": 1,
						"startDate": this.startdate,
						"endDate": this.enddate,
						"state": this.state,
						"OrderType": this.Ordertype,
						"timeType": this.timeType
					},
					"fields": [{
							"e": "Number",
							"c": "提现申请表编号"
						},
						{
							"e": "billdetailnumber",
							"c": "流水编号"
						},
						{
							"e": "username",
							"c": "提现人"
						},
						{
							"e": "amount",
							"c": "提现金额（元）"
						},
						{
							"e": "createdate",
							"c": "申请时间"
						},
						{
							"e": "state",
							"c": "状态"
						}
					]

				}, {
					responseType: 'blob'
				}).then(res => {
					console.log(res)
					let content = res;
					let fileName = '提现申请.xls'
					this.utils.saveAndExport(content, fileName)
				})
			},
			time(e) {
				console.log(e)
				this.startdate = e[0]
				this.enddate = e[1]
				this.timeType = 4

			},
			goBack() {
				this.$router.go(-1)
			},
			getList() {
				this.loading = true
				this.$axios.post('/WithdrawApply/List', {
					"PageIndex": this.page,
					"PageSize": this.pageSize,
					"Key": this.key,
					// "RelationId": this.relationid,
					"timeType": this.timeType,
					"startDate": this.startdate,
					"endDate": this.enddate,
					"state": this.status, //null全部 1待审核 2已驳回 3已审核 4已到账 5打款出错
				}).then((res) => {
					this.tableData = res.rows;
					this.total = res.total;
					this.loading = false
				}).catch(() => {
					this.loading = false
				})
			},
			search() {
				this.getList()
			},
			pageChange(e) { // 页码切换事件
				this.page = e;
				this.getList()
			},
			handleSizeChange(val) {
				this.page = 1;
				this.pageSize = val;
				this.getList()
			},
			views(id) {
				// if (this.status == 1) { //查看用户提现详情
				this.$axios.get('/WithdrawApply/Detail?id=' + id).then((res) => {
					console.log(res)
					this.userForm = res
					this.dialogVisible2 = true
				})
				// 	} else { //查看小哥提现详情
				// 		this.$axios.post('/Admin/Brother/Apply/Details?id=' + id).then((res) => {
				// 			console.log(res)
				// 			this.brotherForm = res
				// 			this.dialogVisible = true
				// 		})
				// 	}
			},
			pass(id) {
				this.$confirm('确认要通过申请吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {+
					this.$axios.get('/WithdrawApply/Pass?id=' + id, ).then((res) => {
						this.$message.success(res.msg);
						this.dialogVisible = false
						this.dialogVisible2 = false
						this.getList()
					})
				})
			},
			reject(id) {
				this.$prompt('确认要拒绝申请吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
					inputErrorMessage: '请填写拒绝申请原因'
				}).then(({
					value
				}) => {
					this.$axios.post('/WithdrawApply/Reject', {
						id: id,
						reason: value
					}).then((res) => {
						this.$message({
							type: 'success',
							message: res.msg
						});
						this.dialogVisible = false
						this.dialogVisible2 = false
						this.getList()
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.process {}

	.nav-bar {
		padding: 45px 0 0;
	}

	.send {
		margin-top: 15px;
		margin-right: 10px;
	}

	.dialogForm {
		display: flex;
		flex-wrap: wrap;

		.el-form-item {
			width: 50%;
			float: left;

			&.all {
				width: 100%;
			}

			.el-select {
				width: 100%;
			}
		}
	}
</style>